import React, { Component } from 'react'
import { apiShopOrderDetail } from '@/request/orderManagement'
import GoBack from '@/components/TheGoBack'
import { Steps, Table, Tooltip, Tag } from 'antd'
import './style/style.less'
import TheImage from '@/components/TheImage'
import { CloseCircleFilled } from '@ant-design/icons'
import _ from 'lodash'
import {
  InfoCircleFilled
} from '@ant-design/icons';

const { Step } = Steps

class Details extends Component {
  state = {
    dataSource: {
      orderState: '3',
    },
    columns: [
      {
        title: '商品信息',
        render: (text, record) => {
          return (
            <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
              <TheImage src={record.goodsImage} width={100} />
              <span style={{ margin: '0 10px' }}>{record.goodsName}</span>
              <span>{record.sku}</span>
              {
                record.giftId !== '0' &&
                <div className='gift'>赠</div>
              }
            </div>
          )
        },
      },
      {
        title: '商品单价',
        dataIndex: 'orderPrice',
        key: 'orderPrice',
        render: (text, render) => {
          return <>
            <React.$price price={text || 0} />
            {
              render.activityType === 'SECKILL_HOMEPAGE' && <div style={{ color: 'red' }}>秒杀价</div>
            }
            {
              render.activityType === 'TEAM_BUY' && <Tag color="red">拼团价</Tag>
            }
          </>
        },
      },
      {
        title: '商品数量',
        dataIndex: 'orderProductCount',
        key: 'orderProductCount',
        render: (text) => text || 0,
      },
      {
        title: '备注',
        dataIndex: 'skuDescription',
        key: 'skuDescription',
        render: (text) => text || '',
      },
      {
        title: '总计',
        dataIndex: 'orderPriceTotal',
        key: 'orderPriceTotal',
        render: (text) => <React.$price price={text || 0} />,
      },
    ],
    stepData: [
      {
        title: '生成订单',
        description: '',
      },
      {
        title: '已付款',
        description: '',
      },
      {
        title: '已发货',
        description: '',
      },
      {
        title: '已收货',
        description: '',
      },
      {
        title: '已完成',
        description: '',
      },
    ],
  }

  async componentDidMount() {
    await this.getDetails()
  }

  getDetails = async () => {
    const orderId = this.props.match.params.id
    const response = await apiShopOrderDetail({ orderId })
    if (response.code === 0) {
      const dataSource = response.data
      const stepData = [
        {
          title: '生成订单',
          description: dataSource.createTime || '',
        },
        {
          title: dataSource.activityType === "TEAM_BUY" && dataSource.orderState === 6 ? "待分享" : '已付款',
          description: dataSource.payTime || '',
        },
        {
          title: '已发货',
          description: dataSource.goodsGoTime || '',
        },
        {
          title: '已收货',
          description: dataSource.goodsArrTime || '',
        },
        {
          title: '已完成',
          description: dataSource.finishTime || '',
        },
      ]
      const detailsData = [
        {
          title: '订单编号',
          value: dataSource.orderCode,
        },
        {
          title: '买家ID',
          value: dataSource.memberId,
        },
        {
          title: '订单金额',
          value: <React.$price price={dataSource.orderTotalPrice || 0} />,
        },
        {
          title: '运费',
          value: !_.isEmpty(dataSource.freight) ? (
            '包邮'
          ) : (
            <React.$price price={dataSource.freight} />
          ),
        },
        {
          title: '下单时间',
          value: dataSource.createTime,
        },
        {
          title: '买家昵称',
          value: dataSource.memberName,
        },
        {
          title: '实付金额',
          value: <React.$price price={dataSource.orderPayPrice || 0} />,
        },
        {
          title: '订单状态',
          value: this.getOrderState(dataSource.orderState),
        },
        {
          title: '优惠金额',
          value: <React.$price price={dataSource.platformDiscountPrice || 0} />,
          flag: true,
          context: '优惠券抵扣:' + (!!dataSource.couponTotal ? (dataSource.couponTotal / 100).toFixed(2) : "0") + ',满减优惠:' + (!!dataSource.fullDecrementAmount ? (dataSource.fullDecrementAmount / 100).toFixed(2) : "0")
        },
        {
          title: '哈哈豆抵扣',
          value: <React.$price price={dataSource.integralDiscountPrice || 0} />
        },
      ]
      const productSkuJson = dataSource.orderDetailList
      const productData = productSkuJson.map((v) => {
        let arr = JSON.parse(v.goodsSkuJson)
        return {
          goodsName: v.goodsName,
          orderPrice: v.orderPrice,
          orderProductCount: v.orderProductCount,
          orderPriceTotal: v.orderPriceTotal,
          activityType: v.activityType,
          skuDescription: v.skuDescription,
          sku: arr.skuAttribute.map((j) => {
            return j.value
          }),
          giftId: v.giftId,
          goodsImage: v.goodsImage,
          productSkuJson,
        }
      })
      const receiving = [
        {
          title: '收货人',
          value: dataSource.memberName,
        },
        {
          title: '联系电话',
          value: dataSource.memberPhone,
        },
        {
          title: '收货地址',
          value: dataSource.memberAddress,
        },
      ]
      if (dataSource.closeReason === null) {
        this.setState({
          dataSource: { ...dataSource, closeReason: '无' },
          stepData,
          detailsData,
          productData,
          receiving,
        })
      } else {
        this.setState({
          dataSource,
          stepData,
          detailsData,
          productData,
          receiving,
        })
      }

      console.log(this.state.detailsData)
    }
  }
  getOrderState = (value) => {
    let label = null
    switch (value) {
      case '3':
        label = <span style={{ color: '#d9001b' }}>待付款</span>
        break
      case '4':
        label = <span style={{ color: '#f59a23' }}>待发货</span>
        break
      case '5':
        label = <span style={{ color: '#70b603' }}>待收货</span>
        break
      case '6':
        label = <span style={{ color: '#70b603' }}>待分享</span>
        break
      case '9':
        label = <span style={{ color: '#70b685' }}>交易成功</span>
        break
      case '0':
        label = <span style={{ color: '#c280ff' }}>交易关闭</span>
        break
    }
    return label
  }
  getOrderStatus = (value) => {
    let num = 0
    switch (value) {
      case '3':
        num = 0
        break
      case '4':
        num = 1
        break
      case '5':
        num = 2
        break
      case '9':
        num = 4
        break
    }
    return num
  }

  render() {
    const {
      dataSource,
      stepData,
      detailsData,
      columns,
      productData,
      receiving,
    } = this.state
    return (
      <>
        {' '}
        <div className={'p-layout-box order-details'}>
          <GoBack history={this.props.history} title={'订单详情'} />
          <div className={'p-layout-content'}>
            <div className={'order-details-content'}>
              <div className={'order-details-title'}>
                订单号：{dataSource.orderCode || ''}
              </div>
              {dataSource.orderState !== '0' && (
                <Steps
                  progressDot
                  current={this.getOrderStatus(dataSource.orderState)}>
                  {_.map(stepData, (v) => {
                    return (
                      <Step
                        title={v.title}
                        description={
                          <div className={'order-details-time'}>
                            {v.description}
                          </div>
                        }
                      />
                    )
                  })}
                </Steps>
              )}
              {dataSource.orderState === '0' && (
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <CloseCircleFilled
                    style={{ color: '#2b6dea', fontSize: 50, marginRight: 20 }}
                  />
                  <div>
                    <div style={{ fontSize: 14, color: '#2b6dea' }}>
                      交易关闭
                    </div>
                    <div
                      style={{ fontSize: 14, color: '#2b6dea', marginTop: 5 }}>
                      <span style={{ marginRight: 10 }}>原因:</span>
                      <span>{dataSource.closeReason}</span>
                    </div>
                  </div>
                </div>
              )}
            </div>
            <div className={'order-details-content'}>
              <div className={'order-details-title'}>订单概况</div>
              <ul className={'order-details-information'}>
                {_.map(detailsData, (v, i) => {
                  let text = ""
                  if (!!v.flag) {
                    text = v.context
                  }
                  return (
                    <li className={'order-details-information-item'}>
                      <span className={'item-title'}>{v.title}</span>
                      <span className={'item-separated'}>:</span>
                      <span style={{ display: !!v.flag && !!v.value ? "none" : "inline-block", }} className={'item-value'}>{v.value}</span>
                      <span style={{ display: !!v.flag && !!v.value ? "inline-block" : "none", marginLeft: 10 }}>
                        <Tooltip title={text} placement="rightTop" >
                          <span className={'item-value'}>{v.value}</span> <InfoCircleFilled />
                        </Tooltip></span>
                    </li>
                  )
                })}
              </ul>
            </div>
            <div className={'order-details-content'}>
              <div className={'order-details-title'}>商品信息</div>
              <Table
                dataSource={productData}
                columns={columns}
                pagination={false}
                summary={(pageData) => {
                  let totalOrderPriceTotal = 0
                  let totalOrderProductCount = 0
                  pageData.forEach(({ orderPriceTotal, orderProductCount }) => {
                    totalOrderPriceTotal += orderPriceTotal || 0
                    totalOrderProductCount += orderProductCount || 0
                  })
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell colSpan={5}>
                          <div style={{ textAlign: 'center' }}>
                            {`共${totalOrderProductCount}件商品，总计`}
                            <React.$price price={totalOrderPriceTotal || 0} />元
                          </div>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  )
                }}
              />
            </div>
            <div className={'order-details-content'}>
              <div className={'order-details-title'}>收货信息</div>
              <ul className={'order-details-receiving'}>
                {_.map(receiving, (v, i) => {
                  return (
                    <li key={i} className={'order-details-receiving-item'}>
                      <span className={'item-title'}>{v.title}</span>
                      <span className={'item-separated'}>:</span>
                      <span>{v.value}</span>
                    </li>
                  )
                })}
              </ul>
            </div>
          </div>
        </div>
      </>
    )
  }
}

export default Details
